<template>
  <scroll-view
    class="home-ele"
    :style="{ height: screenHeight }"
    refresher-enabled
    scroll-y="true"
    @refresherrefresh="getBannerList"
    :refresher-triggered="triggered"
  >
    <div class="swiper-box wrap">
      <uni-swiper-dot
        class="uni-swiper-dot-box"
        :info="info"
        :current="current"
        mode="dot"
        :dots-styles="dotsStyles"
        field="content"
      >
        <swiper circular autoplay class="home-swiper" :current="current" @change="siwperChange">
          <swiper-item class="swiper-item" v-for="(item, index) in info" :key="index">
            <div class="img-box" @click="toDetail(item)">
              <img class="img" mode="aspectFill" :src="ossDomain + item.url" alt="" />
            </div>
          </swiper-item>
        </swiper>
      </uni-swiper-dot>
    </div>
  </scroll-view>
</template>

<script setup lang="ts">
import { ref, reactive, getCurrentInstance, onMounted, computed } from 'vue'
import { useStore } from 'vuex'
const store = useStore()
const screenHeight = ref<number>(0)
const statusBarHeight = computed(() => store.getters['system/statusBarHeight'])
const bottomSafeArea = computed(() => store.getters['system/bottomSafeArea'])
// 页面高度-状态栏高度-底部安全区高度-导航栏高度90rpx - tabBar高度116rpx
screenHeight.value = `calc(100vh - ${statusBarHeight.value}px - ${bottomSafeArea.value}px - 90rpx - 116rpx)`
// triggered:刷新的状态
let triggered = ref<boolean>(false)

import { ossDomain } from '@/utils/oss'
import { bannerList } from '@/utils/api/home'
let current = ref<number>(0)
let info = ref<Array<any>>([])
const siwperChange = (e) => {
  console.log('下表：', e.detail.current)
  console.log('yizhi zai bain')
  current.value = e.detail.current
}
const dotsStyles = reactive({
  backgroundColor: '#D9D9D9',
  selectedBackgroundColor: '#535353',
  bottom: 0,
  border: '0px solid #000',
  selectedBorder: '0px solid #535353',
  width: 5,
  height: 5
})

const getBannerList = async () => {
  // 先调起下拉刷新，模拟网络请求
  triggered.value = true
  const res = await bannerList()
  console.log('首页轮播图', res)
  triggered.value = false
  if (res.code == 200) {
    info.value = res.data
  }
}

onMounted(() => {
  console.log('这个事轮播')
  getBannerList()
})
</script>
<style lang="scss">
@import './home.scss';
</style>
